<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三国杀旋转案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #000;
        }

        .container {
            width: 150px;
            height: 150px;
            margin: 100px auto;
            perspective: 800px;
        }

        .content {
            transform-style: preserve-3d;
            width: 150px;
            margin-left: -75px;
            position: absolute;
            left: 50%;
            right: 50%;
            transition: all .5s;
        }

        .content img {
            width: 150px;
            height: 200px;
            position: absolute;
            transition: all .5s;
            border-radius: 10px;
            box-shadow: 0 0 5px #fff;
        }

        .content img.active {
            box-shadow: 0 0 15px #ff9999;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content" id="content">
        <img src="images/1.png" alt="" class="active">
        <img src="images/2.png" alt="">
        <img src="images/3.png" alt="">
        <img src="images/4.png" alt="">
        <img src="images/5.png" alt="">
        <img src="images/6.png" alt="">
        <img src="images/7.png" alt="">
        <img src="images/8.png" alt="">
        <img src="images/9.png" alt="">
    </div>
</div>

<script>
    window.onload = function () {
        //  获取元素
        var oContent = document.getElementById('content');
        var aImage = oContent.children;

        //  给每一个image设置一个值  rotateY值
        for (var i = 0; i < aImage.length; i++) {
            aImage[i].style.transform = "rotateY(" + i * 40 + "deg) translateZ(226px) rotateY(0deg)";
        }

        var index = 0;
        document.onclick = function () {
            index++;
            // console.log(index*40);
            changeImg(index);
        };

        changeImg(index);

        function changeImg(index) { //  封装功能，根据index切换图片

            oContent.style.transform = "rotateY(" + -index * 40 + "deg)";

            //  判断前一张图片和后一张图片

            var now = index % 9;  //  当前显示的图片
            var beforeImage = now - 1;   //  前一张图片
            var afterImage = now + 1;   //  后一张图片

            //  回到远点
            if (now === 8) {
                afterImage = 0;
            }
            if (now === 0) {
                beforeImage = 8;
            }

            aImage[afterImage].style.transform = "rotateY(" + afterImage * 40 + "deg) translateZ(226px) rotateY(-45deg)";
            aImage[beforeImage].style.transform = "rotateY(" + beforeImage * 40 + "deg) translateZ(226px) rotateY(45deg)";
            aImage[now].style.transform = "rotateY(" + now * 40 + "deg) translateZ(226px) rotateY(0deg)";

            for (var i = 0; i < aImage.length; i++) {
                aImage[i].className = "";
            }
            aImage[now].className = "active";
        }

    }
</script>
</body>
</html>